<template>
	<view class="content" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
		<view class="main">
			<view class="goBack" @tap="nextPage(`/pages/index/index?type=big`)">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view class="title">
				<view class="big">
					<text>欢迎登录</text>
				</view>
				<view class="little">
					<text>杭州市红十字会</text>
				</view>
			</view>
			<view class="box">
				<image src="/static/login/bg2.png" class="boxImg" mode=""></image>
				<view class="login">
					<view class="detail">
						<view class="user">
							<image src="/static/login/user.png" mode=""></image>
							<text>|</text>
							<input type="text" v-model="phone" placeholder="请输入手机号" placeholder-style="{
								width: 206rpx;
								font-size: 26rpx;
								padding-left: 5rpx;
								font-family: SourceHanSansCN;
								font-weight: 400;
								color: #C1C1C1;
							}" 
							value="" />
						</view>
						<view class="line"></view>
						<view class="pwd">
							<image src="/static/login/pwd.png" mode=""></image>
							<text>|</text>
							<input type="password" v-model="pwd" placeholder="请输入密码" placeholder-style="{
								width: 206rpx;
								font-size: 26rpx;
								padding-left: 5rpx;
								font-family: SourceHanSansCN;
								font-weight: 400;
								color: #C1C1C1;
							}" value="" />
							<image src="/static/login/switch.png" mode=""></image>
						</view>
					</view>
					<view class="button">
						<button type="default" @tap="login">登录</button>
					</view>
				</view>
				<text class="all">登录代表你已经同意<text class="tip">《用户协议》</text>和<text class="tip">《隐私权政策》</text></text>
			</view>
			<view class="other">
				<view class="otherText">
					<text>—  其他登录方式  —</text>
				</view>
				<view class="wx">
					<image src="/static/login/wx.png" mode=""></image>
					<text>微信</text>
				</view>
				<view class="otherBottom">
					<text>登录遇到问题?</text>
					<text class="line">|</text>
					<text @tap="nextPage(`/pages/login/login_sms?type=big`)">验证码登录</text>
				<!-- 	<text class="line">|</text>
          			<text @tap="nextPage(`/pages/zc/zc?type=big`)">注册</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import indexBackgroundImage from "@/static/login/bg1.png"
	export default {
		components: {
			
		},
		data() {
			return {
				indexBackgroundImage: indexBackgroundImage,
				phone: "",
				pwd: ""
			};
		},
		methods: {
			//跳转列表对应页面
			nextPage(url) {
				uni.navigateTo({
					url: url,
					fail() {
						uni.switchTab({
							url: url,
							fail() {
								uni.showToast({
									title: '暂未开通，敬请期待！',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			async login() {
				var that = this;
				let phone = this.phone;
				if (phone.trim() == "") {
					uni.showToast({
						title: '请输入手机号',
						duration: 2000
					});
					return;
				} else {
					if (phone.trim().length != 11) {
						uni.showToast({
							title: '手机号格式不正确',
							duration: 2000
						});
						return;
					}
				}
				//密码
				let pwd = this.pwd;
				if (pwd.trim() == "") {
					uni.showToast({
						title: '请输入密码',
						duration: 2000
					});
					return;
				}
				await that.getLoginData(phone, pwd);
				
				console.log('跳转');
				//写完上面定义后就打印一下
				console.log("phone" + phone + "," + pwd);
			},
			 getLoginData(phone, pwd) {
				return new Promise(resolve => {
					uni.request({
						url: 'http://redcrossadmin.isaw.top/api/login/GetLogin', //仅为示例，并非真实接口地址。
						data: {
							phone: phone,
							pwd: pwd
						},
						header: {},
						success: (res) => {
							if (res.data.code == 200) {
								//存储
								var userEntity = {
									userId: res.data.data.userId,
									nickName: res.data.data.nickName,
									token: res.data.data.token
								};
								uni.setStorageSync('userInfo', userEntity);
								uni.switchTab({
									url:'/pages/my/my',
								})
								
								
							} else if (res.data.code == -200) {
								uni.showToast({
									title: '未查询到该用户',
									duration: 2000
								});
								return;
							} else if (res.data.code == 203) {
								uni.showToast({
									title: '密码不正确',
									duration: 2000
								});
								return;
							}
						}
					});
				}).catch((e) => {});
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-repeat: no-repeat;
	background-size: 100%;
	height: 100vh;
	.main{
		.goBack{
			position: absolute;
			padding: 30rpx 0 0 20rpx;
			.u-icon{
				font-size: 50rpx;
				color: #FFFFFF;
			}
		}
		.title{
			padding: 200rpx 0 30rpx 80rpx;
			.big{
				font-size: 50rpx;
				font-family: SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
			}
			.little{
				margin-top: 20rpx;
				font-size: 40rpx;
				font-family: SourceHanSansCN;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.box{
			position: relative;
			margin: 0 30rpx;
			height: 534rpx;
			background: #FFFFFF;
			border-radius: 31px;
			box-shadow: #DCDFE6 0 0 10rpx 0;
			.boxImg{
				position: absolute;
				top: -210rpx;
				right: 35rpx;
				width: 228rpx;
				height: 251rpx;
			}
			.login {
				margin: 0 50rpx;
				padding-top: 120rpx;
				.detail {
					padding: 0 10rpx;
					.user {
						display: flex;
						align-items: center;
						image {
							width: 33rpx;
							height: 29rpx;
						}
						text {
							margin: 0 15rpx;
							color: #C1C4C8;
						}
						input {
							width: 100%;
						}
					}
					.line {
						margin: 30rpx 0;
						width: 100%;
						height: 1rpx;
						background: #848484;
						opacity: 0.2;
					}
					.pwd {
						display: flex;
						align-items: center;
						image:first-child {
							width: 33rpx;
							height: 31rpx;
						}
						text {
							margin: 0 15rpx;
							color: #C1C4C8;
						}
						input {
							width: 100%;
						}
						image:nth-child(4) {
							margin-left: 15rpx;
							width: 36rpx;
							height: 23rpx;
						}
					}
				}
				.button {
					margin-top: 60rpx;
					width: 100%;
					height: 85rpx;
					box-shadow: 0px 6px 10px 0px rgba(22, 121, 253, 0.28);
					border-radius: 18px;
					button {
						background: linear-gradient(-45deg, #4F73FF 0%, #6181FF 100%);
						color: #FFFFFF;
					}
				}
			}
			.all{
				position: absolute;
				bottom: 35rpx;
				right: 0;
				left: 0;
				margin: 0 auto;
				text-align: center;
				font-size: 20rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #666666;
				.tip{
					color: #F34242;
					font-weight: bold;
				}
			}
		}
		.other{
			margin-top: 100rpx;
			text-align: center;
			.otherText{
				font-size: 26rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #656565;
				opacity: 0.51;
			}
			.wx{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 40rpx;
				image{
					width: 84rpx;
					height: 82rpx;
				}
				text{
					margin-top: 15rpx;
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #505050;
					opacity: 0.5;
				}
			}
			.otherBottom{
				margin-top: 50rpx;
				text{
					font-size: 24rpx;
					font-family: AlibabaPuHuiTi;
					font-weight: 400;
					color: #568DEA;
				}
				.line{
					margin: 0 15rpx;
					color: #C1C4C8;

				}
			}
		}
	}
}
</style>
